@use "sass:math";

.search-bar{
  width: 100%;
  z-index: 10;
  border-bottom: 1px solid $color-border;
  background-color: $bg-panel;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  > *{
    margin-right: 5px;
  }
}
$fz-notice: 11px;
.notice{
  margin-left: 20px;
  font-size: $fz-notice;
  color: $text-subtitle;
}

$height-clear: 16px;

.input-item{
  position: relative;
  .btn-clear{
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: ($height-input + $padding-input-tb - $height-clear)/2;
    z-index: 10;
    height: 15px;
    width: 15px;
    padding: 4px;
    background-color: $bg-td;
    @include border-radius(10px);
    img{
      display: block;
      width: 100%;
    }
    &:hover{
      background-color: $color-main;
    }
    &:active{
      transform: translateY(1px);
    }
  }
}

input, select{
  font-size: inherit;
  line-height: $height-input - $padding-input-tb * 2;
  border: 1px solid $border-color-input;
  @include border-radius($radius);
  padding: $padding-input-tb 8px;
  &.code{
    //font-family: monospace;
    flex-shrink: 0;
    width: 5rem;
  }
  &.word{
    flex-shrink: 0;
    width: 12rem;
  }
  &:focus{
    border-color: transparentize($color-main, 0.4);
    @include box-shadow(0 0 0 2px transparentize($color-main, 0.7))
  }
  @include transition(all, 0.5s)
}
select{
  min-width: 80px;
  option{
    padding: 10px;

  }
}

.modal{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  background-color: rgba(255,255,255,0.2);
  @include backdrop-filter(saturate(180%) blur(8px));
  display: flex;
  justify-content: center;
  align-items: center;
  .modal-panel{
    @include border-radius(10px);
    border: 2px solid $color-border;
    padding: 20px;
    margin-bottom: 80px;
    background-color: white;
    width: 300px;
  }
}

.modal{
  &-header{
    text-align: center;
    font-weight: bold;
    font-size: $fz-title;
    padding-bottom: 5px;
  }
  &-body{
    padding: 15px 0;
    input{
      width: 100%;
    }
  }
  &-footer{
    display: flex;
    justify-content: center;
  }
}
